<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Info</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="24">
                <el-col :span="4"><el-image src="https://z1.muscache.cn/pictures/f78e9e8a-236f-4b4d-bac3-71a56e1e4deb.jpg"></el-image></el-col>
                <el-col :span="4" :offset="16">
                    <div class="block">
                        <el-dropdown @command="handleCommand">
                            <el-button type="primary" th:text="*{user.username}" icon="el-icon-arrow-down el-icon--right"></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="toCenter">Center</el-dropdown-item>
                                <el-dropdown-item command="logout">Log out</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-input type="hidden" th:value="${id}" ref="_id"></el-input>
            <el-input type="hidden" th:value="${user.id}" ref="userId"></el-input>
            <center>
                <el-card>
                    <span style="color: #303133; font-size: 20px;">{{host.name}}</span>
                </el-card>
                <el-image
                        class="image"
                        style="width: 600px; height: 300px"
                        :src="host.images.picture_url">
                    <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                    </div>
                </el-image>
                <el-card>
                    <div style="width: 600px">
                        <span style="color: #303133; font-size: 20px;">{{host.summary}}</span>
                    </div>
                    <el-divider content-position="left"></el-divider>
                    <div style="text-align: left">
                        <span style="color: #909399; font-size: 20px;">Address: </span><span style="color: #303133; font-size: 20px;">{{host.address.country}}</span>-<span style="color: #303133; font-size: 20px;">{{host.address.market}}</span><br/>
                        <span style="color: #909399; font-size: 20px;">Rating: </span><span style="color: #303133; font-size: 20px;">{{host.review_scores.review_scores_rating}}</span><br/>
                        <span style="color: #909399; font-size: 20px;">Price: </span><span style="color: #303133; font-size: 20px;">{{host.price.low / 100}}.00</span>/night<br/>
                        <span style="color: #909399; font-size: 20px;">property type: </span><span style="color: #303133; font-size: 20px;">{{host.property_type}}</span><br/>
                        <span style="color: #909399; font-size: 20px;">amenities: </span>
                        <el-tag v-for="item in host.amenities" :key="item">{{item}}</el-tag><br/>
                        <span style="color: #909399; font-size: 20px;">bedrooms: </span><span style="color: #303133; font-size: 20px;">{{host.bedrooms}}</span><br/>
                        <span style="color: #909399; font-size: 20px;">accommodated: </span><span style="color: #303133; font-size: 20px;">{{host.accommodates}}</span><br/>
                        <span style="color: #909399; font-size: 20px;">host status: </span>
                        <span style="color: #303133; font-size: 20px;" v-if="host.host.host_is_superhost">super host</span>
                        <span style="color: #303133; font-size: 20px;"v-else>regular hosts</span>
                    </div>
                    <el-divider content-position="left">Comments</el-divider>
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="content"
                                label="Content">
                        </el-table-column>
                        <el-table-column
                                prop="time"
                                label="Date"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="user_name"
                                label="User"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                fixed="right"
                                label="Action"
                                width="100">
                            <template slot-scope="{row}">
                                <el-button v-if="row.falg" type="text" size="small" @click="toEdit(row._id, row.content)">Edit</el-button>
                                <el-button v-else type="text" disabled size="small">Edit</el-button>
                                <el-button v-if="row.falg" type="text" size="small" @click="deleteCom(row._id)">Delete</el-button>
                                <el-button v-else disabled type="text" size="small">Delete</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size="10"
                            layout="total, prev, pager, next"
                            :total="total">
                    </el-pagination>
                </el-card>
                <div style="margin-top: 15px;">
                    <el-input placeholder="Leave your opinion" v-model="content" class="input-with-select">
                        <el-button slot="append" icon="el-icon-s-promotion" @click="onSubmit"></el-button>
                    </el-input>
                </div>
            </center>
        </el-main>
    </el-container>
    <el-dialog title="Edit" :visible.sync="editVisible" width="30%">
        <el-form :model="form" :rules="rules" ref="editComForm">
            <el-form-item label="Content" prop="content">
                <el-input placeholder="Leave your opinion" type="textarea" v-model="form.content" class="input-with-select" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">Cancel</el-button>
            <el-button type="primary" @click="editCom">Submit</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    ELEMENT.locale(ELEMENT.lang.en)
</script>
<script>
    new Vue({
        el: '#app',
        data: () => {
            return {
                editVisible: false,
                form:{
                    id: '',
                    content: ''
                },
                id: '',
                userId: '',
                currentPage: 1,
                total: 0,
                host: {
                    name: '',
                    summary: '',
                    images: {
                        picture_url: ''
                    },
                    address:{
                        country: '',
                        market: ''
                    },
                    review_scores: {
                        review_scores_rating: 0
                    },
                    price: {
                        low: 100
                    },
                    property_type: '',
                    amenities: [],
                    bedrooms: 0,
                    accommodates: 0,
                    host: {
                        host_is_superhost: false
                    }
                },
                tableData: [],
                content: '',
                rules: {
                    content: [
                        { required: true, message: 'Please enter the content', trigger: 'change' }
                    ]
                },
            }
        },
        mounted() {
            this.id = this.$refs._id.value
            this.userId = this.$refs.userId.value
            this.getData()
        },
        methods: {
            handleCommand(command) {
                location.href = `/${command}`
            },
            getData() {
                $.ajax({
                    url: `/hostInfo/${this.id}`
                    ,type: 'get'
                    ,data: {pageNum: this.currentPage}
                    ,dataType: 'json'
                    ,success: (data) => {
                        if (data.code === 0){
                            this.host = data.data.host
                            this.tableData = data.data.com || []
                            this.total = data.data.total || 0
                            if(this.tableData.length > 0) {
                                this.tableData.forEach(e => {
                                    if (e.user_id === this.userId) {
                                        e.falg = true
                                    } else {
                                        e.falg = false
                                    }
                                })
                            }
                        } else {
                            this.$message.error(data.message)
                            setTimeout(()=> {
                                location.href = `/`
                            }, 1000)
                        }
                    }
                })
            },
            onSubmit() {
                if (undefined === this.content || null === this.content || '' === this.content) {
                    this.$message.error('Please enter a comment')
                } else {
                    $.ajax({
                        url: '/addCom'
                        ,type: 'post'
                        ,data: {id: this.id, content:this.content, name: this.host.name}
                        ,dataType: 'json'
                        ,success: (data) => {
                            if (data.code === 0){
                                this.$message.success(data.message)
                                setTimeout(() => {
                                    location.reload()
                                }, 1000)
                            } else {
                                this.$message.error(data.message)
                            }
                        }
                    })
                }
            },
            toEdit(id, val){
                this.form = {
                    id: id,
                    content: val
                }
                this.editVisible = true
            },
            editCom(){
                this.$refs['editComForm'].validate(valid => {
                    if (valid) {
                        $.ajax({
                            url: '/editCom'
                            ,type: 'post'
                            ,data: this.form
                            ,dataType: 'json'
                            ,success: (data) => {
                                if (data.code === 0){
                                    this.$message.success(data.message)
                                    setTimeout(() => {
                                        location.reload()
                                    }, 1000)
                                } else {
                                    this.$message.error(data.message)
                                }
                            }
                        })
                    }
                })
            },
            deleteCom(id){
                $.ajax({
                    url: '/deleteCom'
                    ,type: 'post'
                    ,data: {id: id}
                    ,dataType: 'json'
                    ,success: (data) => {
                        if (data.code === 0){
                            this.$message.success(data.message)
                            setTimeout(() => {
                                location.reload()
                            }, 1000)
                        } else {
                            this.$message.error(data.message)
                        }
                    }
                })
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getData()
            }
        }
    })
</script>
<style>
    .image {
        width: 100%;
        display: block;
    }
    .el-header{
        color: #333;
        text-align: center;
        height: 10vh;
        padding: 0;
    }

    .el-main {
        color: #333;
        text-align: center;
        height: 90vh;
        padding: 0;
    }
</style>

</html>
